<html>
<head>
    <script src='/_ah/channel/jsapi'></script>
    <script src="/javascript/jquery.js"></script>
    <script src="/javascript/processing.js"></script>
    <title>Tetrinet on App Engine</title>
    <script>
        jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
            this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
            return this;
        }
    </script>
  
    
</head>
<body>
<canvas id="playground" width="800" height="600"></canvas>
<div id="log" name="log"/>
<script>
    $("#playground").center();
    
    var KEY_LEFT = 37;
    var KEY_UP = 38;
    var KEY_RIGHT = 39;
    var KEY_DOWN = 40;
    var KEY_1 = 0;
    var KEY_2 = 0;
    var KEY_3 = 0;
    var KEY_4 = 0;
    var KEY_5 = 0;
    var KEY_6 = 0;
    var KEY_A = 0;
    var KEY_C = 0;
    var KEY_B = 0;
    var KEY_R = 0;
    var KEY_O = 0;
    var KEY_Q = 0;
    var KEY_G = 0;
    var KEY_S = 0;
    var KEY_N = 0;
        
    function sketchProc(processing) {
        var sketch = new Processing.Sketch();  
        var game_images;
        var x = 0;
        var y = 0;
        
        function loadImage(url){
            sketch.imageCache.add(url);  
            return processing.loadImage(url);  
        }
        
        function drawImage(tex,x,y,dw,dh,sx,sy,sw,sh){
            wid = dw || tex.width;
            hgt = dh || tex.height;
            sourcex = sx || 0;
            sourcey = sy || 0;
            sourcewid = sw || wid;
            sourcehgt = sh || hgt;
            processing.image(tex, x, y, wid, hgt, sourcex, sourcey, sourcewid, sourcehgt);
        }
        
        CUBE_BLUE = 0;
        CUBE_YELLOW = 1;
        CUBE_GREEN = 2;
        CUBE_PING = 3;
        CUBE_RED = 4;
        CUBE_A = 5;
        CUBE_C = 6;
        CUBE_N = 7;
        CUBE_R = 8;
        CUBE_S = 9;
        CUBE_B = 10;
        CUBE_G = 11;
        CUBE_Q = 12;
        CUBE_O = 13;
        CUBE_EMPTY = 14;
        
        LARGE = 20;
        SMALL = 10;
        
        var player_boards = new Array();
        
        function drawCube(color, size, x,y ){
            if( color != CUBE_EMPTY) {
                drawImage(game_images,x,y,size,size,size*color,(size==SMALL)?LARGE:0,size,size);
            }
        }
        
        //large 240x440
        //small 120x220
        function drawBackground(x,y,size){
            drawImage(game_images,x,y,12*size,22*size,(size==SMALL)?240:0,30,12*size,22*size);
        }
        
        function drawBoard(player,x,y,size) {
            b = player_boards[player];
            drawBackground(x,y,size);
            for(var bx = 0 ; bx < 12; bx++) {
                for(var by = 0 ; by < 22; by++) {
                    var chr = b.charAt(by*12+bx);
                    var code = chr.charCodeAt(chr)-97;
                    drawCube(code, size, x+bx*size, y+by*size );
                }    
            }
        }
        
        processing.setup = function() {
            // preload the images
            game_images = loadImage("/images/blocks.png");
            
            processing.textureMode(processing.NORMALIZED);  
            processing.fill(255);  
            processing.stroke(processing.color(44,48,32));
            
            onOpened = function(m) {
                $("#log").append("<b>Connection Opened</b><br/>");
            }
            
            onClose = function(m) {
                $("#log").append("<b>Connection Closed</b><br/>");
            }
            
            onError = function(m) {
                $("#log").append("<font color='red'><b>Error:"+m.data+"</b></font><br/>");
            }
            onMessage = function(m) {
                player_boards = eval(m.data);
            }
            channel = new goog.appengine.Channel('{{ token }}');
            socket = channel.open();
            socket.onopen = onOpened;
            socket.onmessage = onMessage;
            socket.onerror = onError;
            socket.onclose = onClose;
            
            
            player_boards[0] = "ggaegcfalmidgncacmmlgdbnhagkmkaniagbjofmebnmdibiecbieabdoohbjblegnhjakjjkkfhfnomhajdfgjccmcimegfdlnoeomglddlbikboilkjkannlbheneeodhaeccclmhmnjfjddoiakelechfaifmiemfkbfjnalkaeamlkemaoiddgkolmdmncmfhlobkhjddklhmlmlhlfojicfmcnhnmnflkaflnfoldbdmaiobhfafngkgoeldjnoibmj";
            player_boards[1] = "lcolgglhddibeengdadbkdhlhjaceeiffiganfmeohkbbmckelhkbkkgdjmjfagjbgndollkomahjjejogknmcbgbljdlgnlkocghcjdkdjimfndmgobjldekigedhjcbjjndndnhdnfedbnghhkaglfdgnhnbfdihhegenmgiecanihdoeodoheiclhhmajgjkdlfahmmgmgclhdlegkfjnfaamnbggkemniabgbjefiedmddgfjngnbcogoghnkgkbdnmh";
            player_boards[2] = "dmongjnkgodhaffdhadcmjdniaieofcjkbihbigondhegdlmbmbbbdcmdnkddbleiojlbgannbiolghnjdnjahfoegmclcjldbjndmlbchflnalfjmfmancokjceajekdaelkjnlcdmdnijaodcjnbankdededbinhekeljbeoojaclcfeicmfnifbdmkbbaiiggnhlancmdjjffegimfoacoenjbfbcddnaohhedjefknhmdhddleanigibenkcjedncdhj";
            player_boards[3] = "cmojmkjfoionnfjndoibcmkhnhboealamonjbmeogabfinndiadblnokaenkokgdfloebkakaongngkglmogecihfliiefhhbljdfodnackfangicdnhmnnehikgihklimondejedlcbmjkofdeffijeoemjcojbmneijcmlhalmihnddmggjfejknomfbdhbhefonnfehojccbkdeicehiifafbdglbjdencfkghoojhjkkellfjnonobolemgejefleofm";
            player_boards[4] = "cmgmgmjkenjanbocmhjgfodihndjigllijkcbgbooifmkecffdihiilcefkokmgjjchmhhfkgcdahjeikagajdjfgdmbgcdbiekmfcnmkcbeodejnmoojaajoilojjnkkdjonfngcnnljlohdhakmikciegiebnaldacaacahbaeeiaonmemdnoakgnjacbhdgehakklcicloahbceecmegonlgdhmnilkjceknfhmcggfebkdhbcgieciecbbaegbhmjkfg";
            player_boards[5] = "kaigeocmkemmjnhhjlnofgajeojihdfbiccijkffgaomhbenfnccljfobacnfidgjefbehjmeefkieieljgjcfbolmaafkmbaioaoihbkoflgcfalenanmnlmfkoncjjbkdnaohefoagadfhgmblmneioamddfolnliboaeblbfagohminndfeekbojioojllfmofeibcbcenofdgoigbjghlkiaddkljlnniagecfbefoccgfflejddfaohjebcahmjkolj";
        };  
        
        // Override draw function, by default it will be called 60 times per second
        processing.draw = function() {
          processing.background(51);
          drawBoard(0,5,5,LARGE);
          drawBoard(1,425,5,SMALL);
          drawBoard(2,550,5,SMALL);
          drawBoard(3,675,5,SMALL);
          drawBoard(4,550,230,SMALL);
          drawBoard(5,675,230,SMALL);
        };
        processing.keyPressed  = function() {
            if( processing.keyCode == KEY_LEFT ) {
                x -= 5;
            }
            else if( processing.keyCode == KEY_UP ) {
                y -= 5;
            }
            else if( processing.keyCode == KEY_RIGHT ) {
                x += 5;
            }
            else if( processing.keyCode == KEY_DOWN ) {
                y += 5;
            }
        }
    }

    var canvas = document.getElementById("playground");
    // attaching the sketchProc function to the canvas
    var p = new Processing(canvas, sketchProc);
</script>
</body>
</html>